<template>
  <div class="login_bg pr">
    <el-row class="center">
      <el-col :span="12" class="login_lg">
        <div class="login_rg pr">
          <div class="logo_icon">
            <img src="../assets/images/logo.png" />
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="login_rg pr">
          <div class="login mc b_rd_5">
            <p class="tc f40 color1 pt40">用户登录</p>
            <!-- 表单 start -->
            <el-form
              ref="loginForm"
              :model="loginForm"
              label-width="80px"
              :rules="rules"
              @submit.native.prevent
            >
              <el-row :gutter="20" justify="center" type="flex" class="mt55">
                <el-col :span="20">
                  <el-form-item label prop="username" label-width="0">
                    <el-input
                      placeholder="请输入您的账号"
                      prefix-icon="el-icon-user"
                      v-model="loginForm.username"
                      clearable
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20" justify="center" type="flex" class="mt20">
                <el-col :span="20">
                  <el-form-item prop="password" label-width="0">
                    <el-input
                      placeholder="请输入您的密码"
                      type="password"
                      v-model="loginForm.password"
                      prefix-icon="el-icon-lock"
                      clearable
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20" justify="center" type="flex" class>
                <!-- <el-col :span="20"> -->
                <!-- <span class="cur color3 f12 fr" @click="reg()">企业注册</span> -->
                <!-- </el-col> -->
              </el-row>
              <el-row :gutter="20" justify="center" type="flex" class="mt30">
                <el-col :span="20">
                  <el-button
                    type="primary"
                    native-type="submit"
                    size="medium"
                    class="wb100 h45 bgcolor5"
                    :loading="loading"
                    @click="sub"
                  >登陆</el-button>
                </el-col>
              </el-row>
            </el-form>
            <!-- 表单 start -->
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- <p class="f100 color1 tc pt140 fw">{{ title }}</p> -->
    <div class="bottom_link">
      <p>©2019 Baidu 云物业管理平台 京ICP证030173号 京公网安备11000002000001号</p>
    </div>
  </div>
</template>
<script>
import { $Http } from '~/plugins/axios'
import { znk } from '~/assets/util/public'
export default {
  name: 'index',
  data () {
    return {
      title: '物业管理系统',
      loading: false,
      loginForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  methods: {
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    reg () {
      this.$router.push({ path: '/reg' })
    },
    sub () {
      this.$refs['loginForm'].validate(valid => {
        if (valid) {
          this.loading = true
          $Http('post', '/shiro/auth/login', {
            username: this.loginForm.username,
            password: this.loginForm.password
          }).then(data => {
            if (data.code === 0) {
              znk.setCookie('token', data.data)
              this.$router.push({
                path: '/home'
              })
            } else {
              this.loading = false
            }
          }).catch(data => {
            console.log('44')
            this.loading = false
          })
        }
      })
    }
  },
  mounted () {
    // this.$store.commit('THAT', this)
  }
}
</script>
<style scoped>
.login_bg {
  width: 100%;
  height: 85%;
  background: url(..\assets\images\bg1.png);
  background-size: 100% 100%;
}
.center {
  width: 70%;
  margin: 0 auto;
}
.login_rg {
  width: 100%;
  height: 680px;
  /* height: 100%; */
}
.logo_icon {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 50%;
  margin-top: -78px;
  left: 50%;
  margin-left: -150px;
}
.logo_icon img {
  width: 100%;
  height: 100%;
}
.login {
  width: 460px;
  height: 420px;
  position: absolute;
  top: 50%;
  margin-top: -200px;
  left: 50%;
  margin-left: -230px;
}
.bottom_link {
  width: 100%;
  position: absolute;
  bottom: -75px;
}
.bottom_link p {
  text-align: center;
  font-size: 16px;
  color: #aaa;
}
</style>
Ï